/**
 * Created by user on 2016/11/24.
 */

/*未处理页面*/

import React from 'react';
import { Breadcrumb, Button, Form, Input, Table, Row, Col, Select, Pagination ,Message } from 'antd';
import LoanModal from './model';

const FormItem =Form.Item;
const Option = Select.Option;

let HandledList = React.createClass({
  contextTypes: {
    router: React.PropTypes.object
  },
  
  getInitialState() {
    return {
      data: [],
      loanData: {},
      record:[],
      visible: false,
      pagination: {
        current: 1,
        pageSize:10
      }
    }
  },
  
  componentDidMount() {
    this.handleSearch();

  },

  fetch() {
    let page = this.state.pagination.current;
    let forms = this.props.form.getFieldsValue();
    console.log(forms);
    let params = Object.assign({}, {pageSize: 10, currentPage: page, isLoan: 0} ,forms);
    let _me = this;
    Utils.sendAjax({
      url: '/funder/loan/findList',
      data: JSON.stringify(params),
      callback: function(result) {
        if (result.code == '200') {
          _me.setState({
            data: result.data,
            pagination: result.page
          })
        }else {
          Message.error(result.message, 10)
        }
      }
    })
  },
  loanDetail(record) {
    let _me = this;
    Utils.sendAjax({
      url: '/funder/loan/detail',
      data: JSON.stringify({id: record.id}),
      callback: function (result) {
        if(result.code == '200') {
          _me.setState({
            loanData: result.data
          })
        }else{
          Message.error(result.message, 10)
        }
      }
    })
  },
  handleSearch() {
    this.setState({
      pagination: {
        current: 1
      }
    })
    this.fetch();
  },
  handleTableChange(pagination) {
    console.log(pagination)
    const pager = this.state.pagination;
    pager.current = pagination.current;
    this.setState({
      pagination: pager
    });
    this.fetch();
  },
  handleReset() {
    this.props.form.resetFields();
  },
  showModal(param) {
    this.setState({
      visible: true,
      record: param
    });
    this.loanDetail(param);
  },
  handleCancel() {
    this.setState({
      visible: false
    })
  },
  rowKey(data) {
    console.log(data);
    return data.id;
  },

  render() {
    
    const { getFieldProps } = this.props.form;
    const columns = [
      {
        title: '房源地址',
        dataIndex: 'address'
      },
      {
        title: '联系人',
        dataIndex: 'contactUser'
      },
      {
        title: '联系方式',
        dataIndex: 'contactPhone'
      },
      {
        title: '借款类型',
        render: (text, record) => {
          let obj= {
            '101': '收房贷',
            '102': '装修贷',
            '103': '租约贷'
          }
          return (
            <span>{obj[record.type]}</span>
          )
        }
      },
      {
        title: '申请借款金额',
        dataIndex: 'applyAmount'
      },
      {
        title: '申请时间',
        dataIndex: 'applyTime'
      },
      {
        title:'放款情况',
        render: (text, record) => {
          let obj= {
            '1' :'已放款',
            '-1' : '拒绝放款'
          }
          return (
            <span>{obj[record.isLoan]}</span>
          )
        }
      },
      {
        title: '操作',
        render: (text, record) => {
          return (
            <a href="javascript:;" onClick={this.showModal.bind(this,record)}>查看详情</a>
          )
        }
      }
    ];
    const addressProps = getFieldProps('address',{
      initialValue: ''
    });
    const typeProps = getFieldProps('type',{
      initialValue: ''
    });
    const contactUserProps = getFieldProps('contactUser',{
      initialValue: ''
    });
    const contactPhoneProps = getFieldProps('contactPhone', {
      initialValue: ''
    });
    const approveProps = getFieldProps('isLoan',{
      initialValue:'0'
    })
    return (
      <div>
        <div className="search-bar">
          <Form inline>
                <FormItem label="房源地址">
                  <Input {...addressProps} placeholder="房源地址" style={{marginBottom: '10px'}}/>
                </FormItem>
                <FormItem label="申请类型">
                  <Select  {...typeProps} style={{width: 180, marginBottom: '10px'}} >
                    <Option value="">全部</Option>
                    <Option value="101">收房贷</Option>
                    <Option value="102">装修贷</Option>
                    <Option value="103">租约贷</Option>
                  </Select>
                </FormItem>
                <FormItem label="联系人">
                  <Input {...contactUserProps}  placeholder="联系人" style={{marginBottom: '10px'}}/>
                </FormItem>
                <FormItem label="联系方式">
                  <Input {...contactPhoneProps} placeholder="联系方式" style={{marginBottom: '10px'}}/>
                </FormItem>
                <FormItem label="放款情况">
                 <Select {...approveProps} style={{width:180, marginBottom: '10px'}} >
                   <Option value="0">全部</Option>
                   <Option value="1">已放款</Option>
                   <Option value="-1">拒绝放款</Option>
                 </Select>
                  </FormItem>
                <FormItem>
                  <div className="search-reset">

                    <Button type="primary" onClick={this.handleSearch} >查询</Button>
                    <Button onClick={this.handleReset} style={{marginLeft: 20}}>重置</Button>
                    </div>
                </FormItem>
          </Form>
        </div>
        <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.data}
               onChange={this.handleTableChange} pagination={this.state.pagination}
        />
        <LoanModal visible={this.state.visible}
                   record={this.state.record}
                   loanData={this.state.loanData}
                   callHide={this.handleCancel}/>
      </div>
    
    );
  }
});
HandledList = Form.create()(HandledList)

export default HandledList;